<script lang="ts" setup>
import { useRequest } from 'vue-request'
import axios from 'axios'

interface ReturnType {
  code: number
  data: {
    name: string
  }
}
interface ParamType {
  age: number
  name: string
}
function serviceMethod(param: ParamType): Promise<ReturnType> {
  return axios.get('/api/long-time-get-req', { params: param })
}
const p: ParamType = { name: '黑子', age: 100 }
function formatResult(ajaxResp: any): ReturnType {
  const { data } = ajaxResp
  return { code: data.code, data: data.data }
}
const { data, loading, error } = useRequest<any, ParamType[], ReturnType>(
  serviceMethod,
  { defaultParams: [p], formatResult }
)
</script>

<template>
  <h3>自动触发请求, 对响应结果进行格式化：UseRequestDemo02.vue</h3>
  <div>
    <div v-if="loading">loading...</div>
    <div v-if="error">failed to fetch</div>
    <div v-if="data">Hey! {{ data }}</div>
  </div>
</template>
